<template>
	<view v-if="show">
		<view class="address" @click="addressClick" v-if="delivery_method == 0">
			<view class="address-left">
				<view class="address-img">
					<image src="../../static/icon/address_location.png" mode=""></image>
				</view>
				<view class="address-info" v-if="detail.address">
					<view class="info-upper">
						{{ detail.address.name }} <text>{{ detail.address.phone }}</text>
					</view>
					<view class="info-lower">
						{{ detail.address.Area.province }}{{ detail.address.Area.city }}{{ detail.address.Area.region }}
						{{ detail.address.detail }}
					</view>
				</view>
				<view class="address-add" v-else>
					请添加收货地址
				</view>
			</view>
			<view class="address-right">
				<view class="address-choose-btn">
					{{ detail.address == 0 ? '添加地址' : '选择地址' }}
				</view>
			</view>
		</view>

		<view class="product">
			<view class="product-li" v-for="(item,index) in detail.goods_list" :key="index">
				<view class="li-left">
					<image :src="item.goods_sku.spec_image =='' ? item.image:item.goods_sku.img_show"
						mode="scaleToFill"></image>
				</view>
				<view class="li-right">
					<view class="">
						<view class="lir-upper">
							<view class="name text-cut">
								{{ item.goods_name }}
							</view>
							<view class="price">
								￥{{ item.goods_price }}
							</view>
						</view>
						<view class="lir-orgin" v-if="detail.coupon_money > 0">
							<view class="">
								￥{{ item.goods_origin_price }}
							</view>
						</view>
					</view>
					<view class="lir-lower">
						<view class="attr">
							{{item.goods_sku.goods_attr ? item.goods_sku.goods_attr :''}}
						</view>
						<view class="nums">
							x{{ item.total_num }}
						</view>
					</view>
				</view>
			</view>

			<view class="item">
				<view class="text">
					运费
				</view>
				<view class="price">
					￥{{ detail.express_price==0 ? 0 : detail.express_price }}
				</view>
			</view>

			<view class="item">
				<view class="text">
					商品总价
					<text>共{{ detail.order_total_num }}件商品</text>
				</view>
				<view class="price">
					￥{{ detail.order_total_price }}
				</view>
			</view>

			<view class="item" v-if="detail.coupon_money > 0">
				<view class="text">
					优惠
				</view>
				<view class="price">
					-￥{{ detail.coupon_money }}
				</view>
			</view>

			<view class="stat">
				<view class="text">
					合计
				</view>
				<view class="price">
					￥{{ detail.order_pay_price }}
				</view>
			</view>
		</view>

		<view class="list">
			<uni-list>
				<uni-list-item showArrow title="优惠券" :clickable="true" @click="couponClick"
					:rightText="coupon_id > 0 && detail.coupon_money > 0 ? '-'+ detail.coupon_money + '元' : couponList.length+'张可用'" />
			</uni-list>
		</view>

		<view class="method">
			<view class="header">
				支付方式
			</view>
			<view class="method-li">
				<view class="mli-left">
					<image src="../../static/icon/wechat.png" mode=""></image>
					<view class="text">
						微信支付
					</view>
				</view>
				<view class="mli-right">
					<image src="../../static/icon/method_checked.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="method">
			<view class="header">
				配送方式
			</view>
			<view class="method-li" @click="deliverMethodClick(0)">
				<view class="mli-left">
					<image src="../../static/icon/delivery.png" mode=""></image>
					<view class="text">
						快递邮寄
					</view>
				</view>
				<view class="mli-right">
					<image
						:src="delivery_method == 0 ? '../../static/icon/method_checked.png' :'../../static/icon/method_check.png'"
						mode=""></image>
				</view>
			</view>
			<view class="method-li" @click="deliverMethodClick(1)">
				<view class="mli-left">
					<image src="../../static/icon/method_shop.png" mode=""></image>
					<view class="text">
						门店自提
					</view>
				</view>
				<view class="mli-right">
					<image
						:src="delivery_method == 1 ? '../../static/icon/method_checked.png' :'../../static/icon/method_check.png'"
						mode=""></image>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footer-content">
				<view class="footer-left">
					<view class="sum">
						<text>合计：</text>
						<text class="text-red">￥{{ detail.order_pay_price }}</text>
					</view>
					<view class="desc">
						实际支付金额以订单确认页为准
					</view>
				</view>
				<view class="ftooer-right">
					<view class="ftooer-buy-btn" @click="payClick">
						去支付
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="couponPopup" :mask-click="false">
			<view class="popup-content">
				<view class="pc-header">
					优惠券
				</view>
				<view class="pc-title">
					我的优惠券
				</view>
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="coupon-list">
						<radio-group class="uni-list" @change="couponChange">
							<label class="cl-li" :style="{'backgroundImage': 'url('+couponBg+')'}"
								v-for="(item,index) in couponList" :key="index">
								<view class="cl-li-left">
									<view class="cl-ll-price">
										<text>￥</text>{{ item.money }}
									</view>
									<view class="cl-ll-text">
										满{{ item.limit }}可用
									</view>
								</view>
								<view class="cl-li-right">
									<view class="cl-lr-content">
										<view class="cl-lr-title text-cut">
											{{ item.name }}
										</view>
										<view class="cl-lr-desc">
											<view v-if="item.range">
												{{ item.range }}
											</view>
											<view class="m-t-10">
												{{ item.validity }}
											</view>
										</view>
									</view>
									<view class="cl-lr-btn">
										<radio :value="index" color="#FF0000" :checked="item.checked" />
									</view>
								</view>
							</label>
						</radio-group>
					</view>
				</scroll-view>

				<view class="pc-footer">
					<view class="pcf-content">
						<view class="pcf-left" @click="couponCancel">
							不使用优惠
						</view>
						<view class="pcf-right" @click="couponConfirm">
							确认使用
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				fromtype: null,
				goods_list: [], // 商品列表
				order_total_num: 0,
				express_price: 0,
				order_total_price: 0,
				order_pay_price: 0,
				disabled: false,
				from_options: [],
				detail: {},
				delivery_method: 0, //配送方式	0-快递邮寄，1-门店自提
				payStatus: 0,
				couponList: [],
				coupon_id: 0,
				couponBg: this.domainUrl + '/assets/img/uniapp/coupon/coupon_bg.png',
			}
		},
		onLoad(options) {
			this.fromtype = options.type
			this.from_options = options
		},
		onShow() {
			if (this.payStatus != 1) {
				this.getData()
			}
		},
		methods: {
			getData(callback = '') {
				let _this = this

				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				if (_this.fromtype === 'cart') {
					_this.$api.get('mall.cart/getlists', {
						ids: _this.from_options.ids,
						delivery_method: _this.delivery_method,
						coupon_id: _this.coupon_id
					}).then(res => {
						uni.hideLoading()
						if (callback === '') {
							if (res.code == 1) {
								//提示下架的商品
								if (res.data.error_msg != '') {
									_this.showModal('商品已下架')
									return false
								}

								_this.detail = res.data
								_this.getCouponList()
								_this.show = true
							} else {
								_this.showModal(res.msg)
							}
						} else {
							callback(res)
						}
					}, fail => {})
				} else {
					_this.$api.get('mall.order/buyNow', {
						goods_id: _this.from_options.goods_id,
						goods_num: _this.from_options.goods_num,
						goods_sku_id: _this.from_options.goods_sku_id,
						delivery_method: _this.delivery_method,
						coupon_id: _this.coupon_id
					}).then(res => {
						uni.hideLoading()
						if (callback === '') {
							if (res.code == 1) {
								//提示下架的商品
								if (res.data.error_msg != null) {
									_this.showModal('商品已下架')
									return false
								}

								_this.detail = res.data
								_this.getCouponList()
								_this.show = true
							} else {
								_this.showModal(res.msg)
							}
						} else {
							callback(res)
						}
					}, fail => {})
				}
			},
			getCouponList() {
				let _this = this

				_this.$api.get('mall.order/getCouponList', {
					goods_ids: _this.detail.goods_ids,
					limit: _this.detail.order_pay_price
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.couponList = res.data.list
					}
				}, fail => {})
			},
			deliverMethodClick(val) {
				if (val == this.delivery_method) {
					return false
				}
				this.delivery_method = val
				this.getData()
			},
			addressClick() {
				uni.navigateTo({
					url: '/pages/user/address/index'
				})
			},
			couponClick() {
				if (this.couponList.length > 0) {
					this.$refs.couponPopup.open('bottom')
				}
			},
			couponChange(e) {
				let _this = this
				let value = e.detail.value
				let list = _this.couponList

				list.forEach((i, v) => {
					if (parseInt(value) === parseInt(v)) {
						list[v].checked = true
					} else {
						list[v].checked = false
					}
				})

				_this.couponList = list
				_this.coupon_id = list[value].id
			},
			couponCancel() {
				let _this = this

				_this.couponList.forEach((i, v) => {
					_this.couponList[v].checked = false
				})

				_this.coupon_id = 0

				_this.getData((res) => {
					if (res.code == 1) {
						_this.detail = res.data
					}
					_this.$refs.couponPopup.close()
				})
			},
			couponConfirm() {
				let _this = this

				if (!_this.coupon_id) {
					_this.toast('请选择优惠券');
					return false
				}

				_this.getData((res) => {
					if (res.code == 1) {
						_this.detail = res.data
						_this.$refs.couponPopup.close()
					} else {
						_this.toast(res.msg)
					}
				})
			},
			payClick() {
				let _this = this

				if (_this.detail.goods_list.length == 0) {
					_this.toast('此订单无商品');
					return false;
				}

				if (_this.detail.has_error) {
					_this.toast(_this.detail.error_msg);
					return false;
				}

				uni.showLoading({
					title: '支付中...',
					mask: true
				})

				if (_this.fromtype === 'cart') {
					_this.$api.post('mall.order/cart_pay', {
						ids: _this.from_options.ids,
						delivery_method: _this.delivery_method,
						coupon_id: _this.coupon_id
					}).then(res => {
						if (res.code == 1) {
							_this.pay(res.data)
						} else {
							uni.hideLoading()
							_this.toast(res.msg)
						}
					}, fail => {})
				} else {
					_this.$api.post('mall.order/buyNow_pay', {
						goods_id: _this.from_options.goods_id,
						goods_num: _this.from_options.goods_num,
						goods_sku_id: _this.from_options.goods_sku_id,
						delivery_method: _this.delivery_method,
						coupon_id: _this.coupon_id
					}).then(res => {
						if (res.code == 1) {
							_this.pay(res.data)
						} else {
							uni.hideLoading()
							_this.toast(res.msg)
						}
					}, fail => {})
				}
			},
			pay(Rdata) {
				let _this = this
				this.payStatus = 1
				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: Rdata.nonceStr, // 随机字符串
					package: Rdata.package, // 固定值
					timeStamp: Rdata.timestamp, // 时间戳（单位：秒）
					signType: Rdata.signType,
					paySign: Rdata.paySign, // 签名，这里用的 MD5/RSA 签名
					success: res => {
						uni.showModal({
							title: '提示',
							content: '支付成功',
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								uni.redirectTo({
									url: '/pages/user/mall/order/order'
								});
							},
							fail: () => {},
							complete: () => {}
						})
					},
					fail: (res) => {
						this.payStatus = 0
						uni.showModal({
							title: '提示',
							content: '支付失败',
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								uni.redirectTo({
									url: '/pages/user/mall/order/order'
								});
							},
							fail: () => {},
							complete: () => {}
						})
					},
					complete: () => {}
				});
			},
			showModal(msg) {
				uni.showModal({
					title: '提示',
					content: msg,
					showCancel: false,
					cancelText: '',
					confirmText: '确认',
					success: res => {
						uni.navigateBack({
							delta: 1
						});
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 250rpx;
	}

	.m-t-10 {
		margin-top: 10rpx;
	}

	.text-red {
		color: #F73830
	}

	.text-cut {
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.address {
		margin-top: 26rpx;
		background-color: #FFFFFF;
		padding: 26rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.address-left {
			width: calc(100vw - 140rpx);
			padding-right: 10rpx;
			display: flex;
			align-items: center;

			.address-img {
				width: 64rpx;
				height: 64rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.address-info {
				margin-left: 10rpx;

				.info-upper {
					font-weight: 800;
					font-size: 32rpx;
					color: #060606;

					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #8A8A8A;
						margin-left: 12rpx;
					}
				}

				.info-lower {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					margin-top: 6rpx;
				}
			}

			.address-add {
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 20rpx;
			}
		}

		.address-right {
			.address-choose-btn {
				width: 140rpx;
				height: 54rpx;
				border-radius: 28rpx;
				border: 2rpx solid #DCDCDC;
				font-weight: 400;
				font-size: 24rpx;
				color: #060606;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}

	.product {
		background: #FFFFFF;
		margin-top: 24rpx;
		padding: 26rpx 36rpx 32rpx 36rpx;

		.product-li {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			margin-bottom: 32rpx;

			.li-left {
				width: 161rpx;
				height: 161rpx;
				border-radius: 10rpx;

				image {
					width: 161rpx;
					height: 161rpx;
				}
			}

			.li-right {
				width: calc(100vw - 161rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 26rpx;
				height: 161rpx;

				.lir-upper {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-weight: 800;
						font-size: 32rpx;
						color: #010101;
					}

					.price {
						font-weight: 800;
						font-size: 28rpx;
						color: #000000;
					}
				}

				.lir-orgin {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #8A8A8A;
					margin-top: 10rpx;
				}

				.lir-lower {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.nums,
					.attr {
						font-weight: 400;
						font-size: 28rpx;
						color: #8A8A8A;
					}
				}
			}
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 26rpx;

			.text {
				font-weight: 800;
				font-size: 32rpx;
				color: #010101;

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #8A8A8A;
					margin-left: 16rpx;
				}
			}

			.price {
				font-weight: 400;
				font-size: 28rpx;
				color: #8A8A8A;
			}
		}

		.stat {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 26rpx;
			border-top: 2rpx solid #F0F0F0;

			.text {
				font-weight: 800;
				font-size: 32rpx;
				color: #010101;
			}

			.price {
				font-weight: 800;
				font-size: 32rpx;
				color: #F73830;
			}
		}
	}

	.method {
		background-color: #FFFFFF;
		padding: 32rpx 36rpx 6rpx 48rpx;
		margin-top: 24rpx;

		.header {
			font-weight: 800;
			font-size: 32rpx;
			color: #000000;
			margin-bottom: 30rpx;
		}

		.method-li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 38rpx;

			.mli-left {
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.text {
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					margin-left: 20rpx;
				}
			}

			.mli-right {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0%;
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.5);

		.footer-content {
			margin: 0 40rpx 40rpx 40rpx;
			padding-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.footer-left {
				.sum {
					font-weight: 800;
					font-size: 32rpx;
				}

				.desc {
					font-weight: 400;
					font-size: 24rpx;
					color: #8A8A8A;
				}
			}

			.ftooer-right {
				.ftooer-buy-btn {
					width: 222rpx;
					height: 80rpx;
					background: #000000;
					border-radius: 40rpx;
					font-weight: 800;
					font-size: 28rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.list {
		padding-top: 32rpx;

		.uni-list {
			padding: 15rpx 0;
		}

		.uni-list--border-top {
			background-color: #FFFFFF;
			height: 0;
		}

		.uni-list--border-bottom {
			background-color: #FFFFFF;
			height: 0;
		}

		.uni-list-item__content-title {
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
		}

		.uni-list-item__container {
			padding: 30rpx 0 30rpx 48rpx !important;
		}
	}

	.popup-content {
		width: 100%;
		height: 420px;
		background: #F5F5F5;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;

		.pc-header {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 40rpx;
			font-size: 36rpx;
			color: #333333;
		}

		.pc-title {
			padding: 24rpx 32rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.scroll-y {
			height: calc(420px - 79px - 80px);
		}

		.pc-footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			/* padding: 32rpx 0; */
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 79px;


			.pcf-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 32rpx;
				width: 100%;
			}

			.pcf-left {
				width: 50%;
				background-color: #FFFFFF;
				border: 2rpx solid #000000;
				font-size: 28rpx;
				color: #000;
				text-align: center;
				padding: 27rpx 0;
				border-radius: 100rpx 0 0 100rpx;
			}

			.pcf-right {
				width: 50%;
				background-color: #000;
				border: 2rpx solid #000000;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				padding: 27rpx 0;
				border-radius: 0 100rpx 100rpx 0;
			}
		}

		.coupon-list {
			padding: 0 32rpx 20rpx 32rpx;

			.cl-li {
				width: 100%;
				height: 180rpx;
				border-radius: 16rpx;
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				background-size: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.cl-li-left {
					width: 28%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;

					.cl-ll-price {
						font-size: 64rpx;
					}

					.cl-ll-price text {
						font-size: 28rpx;
					}

					.cl-ll-text {
						font-size: 28rpx;
					}
				}

				.cl-li-right {
					width: 67%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.cl-lr-title {
						color: #333333;
						font-size: 32rpx;
						font-weight: bold;
					}

					.cl-lr-desc {
						margin-top: 8rpx;
						color: #999999;
						font-size: 20rpx;
					}

					.cl-lr-btn {
						margin-right: 32rpx;
					}

					.cl-lr-content {
						width: calc(100% - 108rpx - 40rpx);
					}
				}
			}
		}
	}
</style>